<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">申请社区</block>
		</custom-nav-sq-xcx>
		<sq-screen-area :formFlag="true" :needBtnFlag="true">
			<block slot="formContent">
				<view class="sqFormWrap">
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>所在省市县</view>
						<view class="formCon selArea posRel">
							<select-area
								currPage="selGrid"
								:specFlag="specFlag" 
								:province="provName" 
								:showAreaFlag="showAreaFlag" 
								:city="cityName" 
								:country="countryName" 
								:isHasSelFlag="isHasSelFlag"
								@toggleAreaPicker="toggleAreaPicker"
								@selected="selectCity"
							></select-area>
							<view class="triView">选择</view>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>所在乡镇/街道</view>
						<view class="formCon selArea posRel" @tap="goSelTown">
							<view class="street" :class="[selTownFlag ? 'hasSel' : '']">{{townName}}</view>
							<view class="triView">
								<view class="iconfont icon-gengduo"></view>
							</view>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>选择社区</view>
						<view class="formCon selArea posRel"  @tap="goSelSq">
							<view class="street" :class="[selGridFlag ? 'hasSel' : '']">{{gridName}}</view>
							<view class="triView">
								<view class="iconfont icon-gengduo"></view>
							</view>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>社区地址</view>
						<view class="formCon">
							<input class="formInp" type="text" v-model="sqAddress" placeholder="请输入社区地址(40字内)" maxlength="40" placeholder-style="color:#8789B1"/>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>管理员账号</view>
						<view class="formCon">
							<input class="formInp" type="text" v-model="account" placeholder="请输入管理员账号(字母或数字组成12位以内)" maxlength="12" placeholder-style="color:#8789B1"/>
						</view>
						<view class="notes">1.管理员账号由英文字母或数字组成,如若为手机号且不能和您当前App登录账号绑定手机相同</view>
						<view class="notes">2.账号初始密码为123456,如需修改可联系社区工作人员修改</view>
					</view>
					<view class="formItem">
						<view class="formTit">社区头像</view>
						<view class="upSqView fixedWid">
							<upload-image :mainImg="mainImg" :pathName="pathNameSqLogo" :mainImgEdit="mainSucc_Logo" :currType="currType" clickOpt="uoLogo" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
							<view class="iconfont icon-jia"></view>
							<view class="tipTxt">请上传社区头像</view>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>证明材料</view>
						<view class="upSqView fixedWid">
							<upload-image :mainImg="mainImg" :pathName="pathNameSqZmcl" :mainImgEdit="mainSucc_zmcl" :currType="currType" clickOpt="uoLogo" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
							<view class="iconfont icon-jia"></view>
							<view class="tipTxt">请上传证明材料</view>
						</view>
					</view>
					<view class="lxrForm hasFlex">
						<view class="lxrItem">
							<view class="lxrTit">联系人</view>
							<view class="lxrInp">
								<input class="inpView" v-model="lxrName" type="text" placeholder="请输入联系人姓名" placeholder-style="color:A6A6A6;"/>
							</view>
						</view>
						<view class="lxrItem">
							<view class="lxrTit">联系电话</view>
							<view class="lxrInp">
								<input class="inpView" v-model="lxrTel" type="tel" placeholder="请输入联系方式" placeholder-style="color:A6A6A6;"/>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block slot="formBtn">
				<button class="comBtn sq hasBorRad" :disabled="btnDisabFlag" @tap="goSubmit">{{btnTit}}</button>
			</block>
		</sq-screen-area>
	</view>
</template>

<script>
	import SqScreenArea from "@/components/sq-screen-area";
	import uploadImg from '@/components/upload-image/upload-image'
	export default {
		components:{
			SqScreenArea,
			uploadImg
		},
		data(){
			return{
				lxrName:'',
				lxrTel:'',
				provName : '请选择省',
				cityName : '市',
				countryName : '县/区',
				townName:'请选择所在乡镇/街道',
				gridName:'请选择社区',
				selTownFlag:false,
				selGridFlag:false,
				specFlag : false,
				isHasSelFlag:false,
				showAreaFlag:false,
				countyCode:'',
				pathNameSqLogo:'sqSys/createSq',
				pathNameSqZmcl:'sqSys/createSq',
				account:'',
				sqAddress:'',
				mainImg:'',
				mainSucc_Logo:'',
				mainSucc_zmcl:'',
				btnTit:'提交',
				radius:16,
				currType:''
			}
		},
		methods:{
			upImgIng(){
				this.btnTit = '上传中...';
				this.btnDisabFlag = true;
			},
			uploadSingleImg(e){
				this.btnTit = '提交审核';
				this.btnDisabFlag = false;
				if(e.clickOpt == 'upLogo'){
					this.mainSucc_Logo = e.succSrc;
				}else if(e.clickOpt == 'upZmcl'){
					this.mainSucc_zmcl = e.succSrc;
				}
			},
			toggleAreaPicker(isShow){
				this.showAreaFlag = isShow;
			},
			goSelTown(){
				/*
					if(this.countyCode == ''){
						this.util.showToast('请选择省市县');
						return;
					}
					let townName = this.townName != '请选择所在乡镇/街道' ? this.townName : ''
					uni.navigateTo({
						url:'/pages/subMine/applyRz/townList?countyCode=' + this.countyCode + '&townName=' + townName
					})
				*/
				uni.navigateTo({
					url:'/pages/subSqMine/createSq/townList'
				})
			},
			goSelSq(){
				// if(this.townName == '请选择所在乡镇/街道'){
				// 	this.util.showToast('请选择乡镇');
				// 	return;
				// }
				// uni.navigateTo({
				// 	url:'/pages/subSqMine/createSq/sqList?countyName=' + this.countryName + '&townName=' + this.townName + '&groupId=' + this.groupId
				// })
			},
			selectCity(e){
				this.showAreaFlag = false;
				this.isHasSelFlag = e.isHasSelFlag;
				this.provName = e.province;
				this.cityName = e.city;
				this.countryName = e.country;
				this.countyCode = e.countyCode;
				
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("/static/css/common/uni.css");
	@import '@/static/scss/addYybs.scss';
	.lxrForm{
		margin: 30rpx 0 30rpx;
		.lxrItem{
			flex: 1;
			.lxrTit{
				font-size: 26rpx;
				color: $sq-maina;
			}
			.inpView{
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #E1E3E8;
				color: $sq-main0;
			}
			&:first-child{
				margin-right: 15rpx;
			}
		}
	}
</style>